<template>
	<div class="node-wrap" ref="node">
		<div class="node-wrap-box" @click="show">

			<!-- start-node -->

			<div class="content" style="color: rgb(130, 140, 165);">

				<em class="item-index">{{nodeConfig.index}}</em>

				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>

				<div class="flex ai-center" style="padding: 5px;padding-right: 25px;">
					<div class="item-icon flex ai-center jc-center" style="width: 60px;">
						<img style="border-radius: 6px;"
							src="https://lf3-static.bytednsdoc.com/obj/eden-cn/dvsmryvd_avi_dvsm/ljhwZthlaukjlkulzlp/icon/icon-Code-v2.jpg"
							alt="">
					</div>
					<div class="flex ai-center jc-center">
						<div>
							<span class="high-light">{{nodeConfig.name || '代码执行'}}</span>
							<br> {{nodeConfig?.metadata?.description || '编写代码，处理输入变量来生成返回值'}} <span
								class="high-light">&nbsp;</span>
						</div>
					</div>
				</div>

			</div>

		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>

		<el-drawer title="代码设置" v-model="drawer" destroy-on-close append-to-body :size="800">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.name}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.name" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>

			<jsonSchemaSelect v-model="jsShow" style="right:825px;top:0px;bottom: 0px;height:750px;"></jsonSchemaSelect>

			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">

						<el-collapse v-model="collapseShow">

							<el-collapse-item title="输入" name="输入">
								<template #title>
									<div
										style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
										<div style="display: flex; align-items: center;">
											输入&nbsp;
											<el-tooltip placement="top" effect="light">
												<template #content>
													输入需要添加到代码的变量，代码中可以直接引用此处添加的变量
												</template>
												<el-icon style="color:rgba(32, 41, 69, 0.62)"
													@click.stop=""><el-icon-info-filled /></el-icon>
											</el-tooltip>
										</div>
										<div style="display: flex; align-items: center;"
											@click.stop="$refs.inputTable.rowAdd">
											<el-button size="small" type="primary" plain>
												<el-icon><el-icon-plus /></el-icon>
											</el-button>
										</div>
									</div>
								</template>

								<el-form-item>

									<div v-if="true" draggable="true"
										@dragstart="handleDragStart($event, {var:`$('test').fff`})">
										变量拖拽测试
									</div>

									<sc-form-table v-model="inputParameters" ref="inputTable"
										:addTemplate="inputTemplate" :drag-sort="false" placeholder="暂无数据" hideAdd
										hideIndex :border="false">
										<el-table-column prop="name" label="变量名" width="200">
											<template #default="scope">
												<el-input v-model="scope.row.name" placeholder="输入参数名" />
											</template>
										</el-table-column>
										<el-table-column prop="value" label="变量值">
											<template #default="scope">
												<ta-cm-editor v-if="collapseShow.includes('输入')"
													v-model="scope.row.value.content"></ta-cm-editor>
											</template>
										</el-table-column>
										<el-table-column width="55">
											<template #default="scope">
												<el-link type="danger" :underline="false"
													@click="inputParameters.splice(scope.$index, 1)">移除</el-link>
											</template>
										</el-table-column>
									</sc-form-table>
								</el-form-item>
							</el-collapse-item>

							<el-collapse-item title="代码" name="代码">


								<template #title>
									<div
										style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
										<div style="display: flex; align-items: center;">
											代码&nbsp;
											<el-tooltip placement="top" effect="light">
												<template #content>
													参考代码示例编写一个函数的结构，你可以直接使用输入参<br>
													数中的变量，并通过return一个对象来输出处理结果 此功能<br>
													不支持编写多个函数即使仅有一个输出值，也务必保持以对<br>
													象的形式return
												</template>
												<el-icon style="color:rgba(32, 41, 69, 0.62)"
													@click.stop=""><el-icon-info-filled /></el-icon>
											</el-tooltip>
										</div>
										<div style="display: flex; align-items: center;" @click.stop="">
											<el-button @click="jsCodeParse" size="small" type="primary" plain>
												&nbsp;参数解析&nbsp;
											</el-button>
										</div>
									</div>
								</template>

								<el-form-item>
									<el-main class="nopadding">
										<sc-code-editor ref="code" style="min-width:750px;height:100%;"
											v-model="form.properties.code" mode="javascript"
											theme="darcula"></sc-code-editor>
									</el-main>
								</el-form-item>
							</el-collapse-item>

							<el-collapse-item title="输出" name="输出">
								<template #title>
									<div
										style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
										<div style="display: flex; align-items: center;">
											输出&nbsp;
											<el-tooltip placement="top" effect="light">
												<template #content>
													代码运行完成后输出的变量，必须保证此处定义的变量名、变量类型与代码的return对象中完全一致
												</template>
												<el-icon @click.stop=""
													style="color:rgba(32, 41, 69, 0.62)"><el-icon-info-filled /></el-icon>
											</el-tooltip>
										</div>
										<div style="display: flex; align-items: center;" @click.stop="">
											<el-button size="small" type="primary" plain>
												<el-icon><el-icon-plus /></el-icon>
											</el-button>
										</div>
									</div>
								</template>
								<el-form-item>
									<div>变量名</div>
									<div>变量类型</div>
								</el-form-item>
							</el-collapse-item>
							<el-collapse-item title="环境变量" name="环境变量">
								<template #title>
									<div
										style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
										<div style="display: flex; align-items: center;">
											环境变量&nbsp;
											<el-tooltip placement="top" effect="light">
												<template #content>
													输入需要添加到代码的环境变量，代码中可以直接引用此处添加的变量
												</template>
												<el-icon style="color:rgba(32, 41, 69, 0.62)"
													@click.stop=""><el-icon-info-filled /></el-icon>
											</el-tooltip>
										</div>
										<div style="display: flex; align-items: center;" @click.stop="">
											<el-button size="small" type="primary" plain>
												<el-icon><el-icon-plus /></el-icon>
											</el-button>
										</div>
									</div>
								</template>

								<el-form-item>
									<div>变量名</div>
									<div>变量类型</div>
									<div>变量值</div>
								</el-form-item>
							</el-collapse-item>

							<el-collapse-item title="异常忽略" name="异常忽略">
								<template #title>
									<div
										style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
										<div style="display: flex; align-items: center;">
											异常忽略&nbsp;
											<el-tooltip placement="top" effect="light">
												<template #content>
													异常设置
												</template>
												<el-icon @click.stop=""
													style="color:rgba(32, 41, 69, 0.62)"><el-icon-info-filled /></el-icon>
											</el-tooltip>
										</div>
										<div style="display: flex; align-items: center;" @click.stop="">
											<el-switch v-model="form.properties.settingOnError.switch" />
										</div>
									</div>
								</template>
								<el-form-item>
									<span style="color:rgba(32, 41, 69, 0.62)">忽略异常并在异常发生时使用默认输出替代</span>
								</el-form-item>
							</el-collapse-item>




						</el-collapse>

					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import parse from "@/utils/commentParser"

	import addNode from './addNode'

	import jsonSchemaSelect from '../jsonSchemaSelect.vue'

	import {
		defineAsyncComponent
	} from 'vue';
	const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));

	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			jsonSchemaSelect,
			addNode,
			scCodeEditor
		},
		data() {
			return {
				inputParameters: [

				],
				envParameters: [

				],
				outputParameters: [

				],
				inputTemplate: {
					name: "username",
					type: "string",
					value: {
						content: "{{ $(\"code1\").username }}",
						type: "expr", // fixed
					}
				},
				collapseShow: ['输入', '代码'],
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {},
				jsShow: true,
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			handleDragStart(event, variable) {
				event.dataTransfer.setData('text/plain', variable.var);
				event.dataTransfer.effectAllowed = 'copy';
			},
			jsCodeParse() {
				console.error(parse(this.form.code))
			},
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show() {
				this.form = {}
				this.form = JSON.parse(this.safeStringify(this.nodeConfig))
				this.collapseShow = ['输入', '代码', '输出'];
				this.drawer = true
				this.$nextTick(() => {
					this.$refs.inputTable.rowAdd()
					this.jsShow = true
				})
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
				this.nodeConfig.name = this.form.name
			},
			save() {
				this.$emit("update:modelValue", this.form)
				this.drawer = false
				this.jsShow = false
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			delUser(index) {
				this.form.nodeUserList.splice(index, 1)
			},
			selectHandle(type, data) {
				this.select(type, data)
			},
			toText(nodeConfig) {
				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
					const users = nodeConfig.nodeUserList.map(item => item.name).join("、")
					return users
				} else {
					if (nodeConfig.userSelectFlag) {
						return "发起人自选"
					} else {
						return false
					}
				}
			}
		}
	}
</script>

<style scoped>
	:deep(.el-collapse-item__content) {
		padding-bottom: 0px;
	}

	.modal-class {
		/*position: static !important;*/
	}
</style>
